<template>
  <view class="product-info" @click="gotoDetails">
    <view class="product-cover">
      <image :src="value.cover" mode="aspectFill"></image>
    </view>
    <view class="product-content">
      <view class="con-title" v-show="value.name">
        {{ value.name }}
      </view>
    </view>
    <view class="con-lable" v-if="value.is_label == 1">
      {{ value.label_name }}
    </view>
    <view class="price-con">
      <view class="old-price" v-show="value.line_price">
        原价：<text style="font-size: 16rpx">¥</text> {{ value.line_price }}
      </view>
      <view class="news-price" v-if="value.line_price">
        <text style="font-size: 24rpx">¥</text>{{ value.price.split(".")[0] }}
        <text
          >.{{
            value.price.split(".")[1] ? value.price.split(".")[1] : "00"
          }}</text
        >
      </view>
      <view class="news-price" v-else> 0.00 </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
const value = ref({});
const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
});
</script>
<style lang="scss">
.product-info {
  width: 340px;
  background-color: pink;
  border-radius: 12px;
  border: 1px solid #f5f5f5;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 24px;
}

.product-cover {
  width: 340px;
  height: 340px;
  background: purple;
  overflow: hidden;
  box-sizing: border-box;
}

.product-cover image {
  width: 340px;
  height: 340px;
  display: block;
}

.product-content {
  width: 100%;
  padding: 16px 14px 0 14px;
  box-sizing: border-box;
}

.con-title {
  width: 100%;
  font-size: 26px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  word-break: break-all;
  word-wrap: break-word;
  color: #333333;
  line-height: 36px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}
.con-lable {
  display: inline-block;
  min-height: 30px;
  background: #fcf1ef;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ec6439;
  line-height: 20px;
  box-sizing: border-box;
  margin-left: 24px;
  max-width: calc(100% - 48px);
  word-break: break-all;
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.con-button {
  width: 308px;
  height: 56px;
  background: #eb5946;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #ffffff;
  line-height: 30px;
  margin: 0 auto;
  margin-bottom: 16px;
}
.price-con {
  width: 308px;
  height: 88px;
  background-size: 100% 100%;
  //   background: url("bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin: 0 auto;
  margin-top: 16px;
  margin-bottom: 24px;
}
.old-price {
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 22px;
  position: absolute;
  bottom: 0;
  left: 0;
  text-decoration: line-through;
}
.news-price {
  width: 132px;
  font-size: 30px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: bold;
  color: #ffffff;
  line-height: 30px;
  text-shadow: 0px 0px 3px #ff2f27;
  text-align: center;
  position: absolute;
  top: 12px;
  right: 20px;
}
.news-price text {
  font-size: 24px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #ffffff;
  line-height: 24px;
  text-shadow: 0px 0px 3px #ff2f27;
}
</style>
